<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta content="email=no" name="format-detection" />
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="yes">
    <meta name="browsermode" content="application">
    <title>APP语音助手</title>
    <link href="https://cdn.bootcss.com/loaders.css/0.1.2/loaders.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
    <style>
        body {
            margin: 0;
            padding: 0;
            background: black;
            color: white;
        }

        #app {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 20px;
        }

        .voice-loader {
            text-align: center;
            padding-top: 50px;
        }

        .voice-loader .ball-scale-multiple {
            height: 100px;
            width: 100px;
            margin: 0 auto;
        }

        .voice-loader .ball-scale-multiple div {
            left: 0;
            height: 100px;
            width: 100px;
        }

        .speech-loader {
            display: flex;
            align-items: center;
        }

        .speech-text {
            padding-left: 20px;
        }

        .sending-loader {
            display: flex;
            align-items: center;
        }

        .sending-text {
            padding-left: 50px;
        }


        .hide {
            display: none !important;
        }

        @media screen and (max-width: 500px) {

            .voice-loader span {
                display: none;
            }

            .speech-loader,
            .sending-loader {
                display: block;
            }

            .speech-text,
            .sending-text {
                padding-left: 0;
            }

        }
    </style>
</head>

<body>

    <div id="app">

        <div class="voice-loader">
            <div class="ball-scale-multiple">
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div>
                APP语音助手<span>，点击开始服务</span>
            </div>
        </div>

        <div class="speech-loader hide">
            <div class="loader-inner line-scale-pulse-out-rapid">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="speech-text">
                正在聆听中...
            </div>
        </div>

        <div class="sending-loader hide">
            <div class="pacman">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
            <div class="sending-text">
                命令发送中...
            </div>
        </div>

    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/toastr.js/latest/js/toastr.min.js"></script>
    <script>
        toastr.options = {
            "closeButton": true,
            "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
        function toast(msg) {
            toastr["info"]("APP语音助手", msg)
        }
    </script>
    <script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
    <script>
        let sp = document.querySelector('.speech-loader'),
            vo = document.querySelector('.voice-loader'),
            st = document.querySelector('.speech-text'),
            sl = document.querySelector('.sending-loader')
        vo.onclick = () => {
            top.window.external.start_voice()

            vo.classList.add('hide')
            sp.classList.remove('hide')
            st.textContent = '正在聆听中...'
        }
        document.addEventListener('DOMContentLoaded', function () {
            FastClick.attach(document.body);
        }, false);	
    </script>
    <script>
        //结束识别
        top.window.end_voice = function () {
            // console.log('结束了')
            toast("识别结束，发送命令中...")
            sp.classList.add('hide')
            sl.classList.remove('hide')
            let text = st.textContent
            if (text) {
                let query = new URLSearchParams(location.search)
                fetch(decodeURIComponent(query.get('api')), {
                    mode: 'no-cors',
                    method: 'post',
                    body: JSON.stringify({
                        text
                    })
                }).then(res => res.json()).then(res => {
                    console.log(res)
                    setTimeout(() => {
                        toast(res.msg)
                    }, 1000)
                }).finally(() => {
                    sl.classList.add('hide')
                    vo.classList.remove('hide')
                })
            }
        };
        top.window.result_voice = function (listenText) {
            st.textContent = listenText
        };
    </script>
</body>

</html>